<template>
  <button :type="htmlType" :class="clazz" :disabled="loading || disabled" @click="onClick">
    <i v-if="icon && !loading" :class="icon"></i>
    <i v-if="loading" class="fa fa-spinner" :class="{'fa-spin':loading}"></i>
    <slot/>
  </button>
</template>

<script>
  export default {
    name: 'BsButton',
    props: {
      htmlType: {
        type: String,
        default: 'button'
      },
      type: {
        type: String,
        default: 'default'
      },
      size: {
        type: String
      },
      block: {
        type: Boolean
      },
      icon: {
        type: String
      },
      loading: {
        type: Boolean
      },
      disabled: {
        type: Boolean
      },
      to: {
        type: Object | String
      }
    },
    computed: {
      clazz() {
        let str = `btn btn-${this.type}`;
        if (this.size) {
          str += ` btn-${this.size}`;
        }
        if (this.block) {
          str += ' btn-block';
        }
        return str;
      }
    },
    methods: {
      onClick() {
        if (this.to) {
          this.$router.push(this.to);
        } else {
          this.$emit('click');
        }
      }
    }
  };
</script>

<style scoped>

</style>
